<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:insert="fragments/head"></head>
<body>
<header th:insert="fragments/header"></header>

<main>
    <div class="container">
        <div class="row mt-3">
            <!-- 侧边信息 -->
            <div class="col s12 m4 l3">
                <ul class="collapsible z-depth-3">
                    <li class="active">
                        <div class="collapsible-header">
                            <i class="material-icons">book</i>
                            <span th:text="${curso.nomCurso}">课程名称</span>
                        </div>
                        <div class="collapsible-body">
                            <span th:text="${curso.descripcionCurso}">课程描述</span>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header"><i class="material-icons">local_atm</i>价格</div>
                        <div class="collapsible-body"><span>免费</span></div>
                    </li>
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">school</i>难度等级
                        </div>
                        <div class="collapsible-body">
                            <span th:text="${curso.dificultadCurso}">课程难度</span>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header"><i class="material-icons">assignment_ind</i>授课教师</div>
                        <div class="collapsible-body">
                            <a th:href="@{/profesores/{id_profesor}(id_profesor=${curso.profesor.id_profesor})}">
                                <div class="row">
                                    <img th:src="${curso.profesor.imgurl}"
                                         class="col s4 m12 circle responsive-img"
                                         alt="教师头像"/>
                                    <div class="col s8 m12 teal-text mt-3 center-align">
                                        <strong th:text="${curso.profesor.nomProfesor} + ' ' + ${curso.profesor.apeProfesor}">
                                            教师信息
                                        </strong>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 课程详情 -->
            <div class="col s12 m8 l9">
                <div class="card z-depth-3">
                    <div class="card-image">
                        <img th:src="${curso.imgurl}" alt="课程封面">
                        <span id="detail-card-title" class="card-title">
                            <strong th:text="${curso.nomCurso}">课程名称</strong>
                            <span sec:authorize="hasRole('ROLE_ADMIN')">
                                <a th:href="@{/cursos/edit/{id_curso}(id_curso=${curso.id_curso})}"
                                   class="btn-floating waves-effect waves-light btn-small yellow darken-1">
                                    <i class="material-icons">edit</i>
                                </a>
                            </span>
                            <span sec:authorize="hasRole('ROLE_ADMIN')">
                                <a th:href="@{/cursos/delete/{id_curso}(id_curso=${curso.id_curso})}"
                                   class="btn-floating waves-effect waves-light btn-small red lighten-1">
                                    <i class="material-icons">delete_forever</i>
                                </a>
                            </span>
                        </span>
                    </div>
                    <div class="card-content" th:text="${curso.detalleCurso}">
                        <p>课程详情</p>
                    </div>
                    <div class="card-action">
                        <a th:if="${matriculado == false}" href="#modal-matricula"
                           class="teal-text darken-1 modal-trigger">
                            <strong>立即报名</strong>
                        </a>
                        <a target="_blank" th:unless="${matriculado == false}" th:href="${curso.urlCurso}"
                           class="teal-text darken-1">
                            <strong>进入学习</strong>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 报名确认弹窗 -->
            <div id="modal-matricula" class="modal">
                <div class="modal-content">
                    <h4 class="teal-text">课程报名</h4>
                    <p>您即将开启一段全新的学习之旅。确认要报名
                        <strong th:text="${curso.nomCurso}">课程名称</strong>
                        吗？授课教师：
                        <strong th:text="${curso.profesor.nomProfesor} + ' ' + ${curso.profesor.apeProfesor}">
                            教师姓名
                        </strong>
                    </p>
                </div>
                <div class="modal-footer">
                    <a href="#!" class="modal-close waves-effect waves-red btn-flat red-text">取消</a>
                    <a th:href="|/matricula/save/${curso.id_curso}|"
                       class="modal-close waves-effect waves-green btn-flat teal-text">确认报名</a>
                </div>
            </div>
        </div>
    </div>
</main>
<br><br>
<footer class="page-footer teal" th:insert="fragments/footer"></footer>

<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="/js/materialize.js"></script>
<script src="/js/init.js"></script>
</body>
</html>